<template>
	<view class="container">
		<!-- <ImagesUploaderVue></ImagesUploaderVue> -->
		<!-- 图片上传 here-->
		<uni-forms-item label="照片">
			<ImagesUploaderVue ref="uploaderRef" :avatar="formData.avatar"></ImagesUploaderVue>
	

		</uni-forms-item>
		<uni-forms ref="formRef" :model="formData" :rules="rules">
			<!-- 基本信息 -->
			<uni-section title="基本信息" type="line">
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="性别" name="gender">
					<radio-group @change="onRadioChange" :value="formData.gender">
						<label>
							<radio value="男" :checked="formData.gender === '男' || formData.gender === '0'" />男
						</label>
						<label>
							<radio value="女" :checked="formData.gender === '女' || formData.gender === '1'" />女
						</label>
					</radio-group>
				</uni-forms-item>

				<uni-forms-item label="求职意向" name="jobTarget">
					<uni-easyinput v-model="formData.jobTarget" placeholder="请输入求职意向" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="major">
					<uni-easyinput v-model="formData.email" placeholder="邮箱" />

				</uni-forms-item>
				<uni-forms-item label="联系电话" name="phone">
					<uni-easyinput v-model="formData.phone" placeholder="请输入手机号" />
				</uni-forms-item>
				<!-- 需要添加的信息here -->
				<uni-forms-item label="个人主页" name="major">
					<uni-easyinput v-model="formData.website" placeholder="个人主页url" />
				</uni-forms-item>
				<uni-forms-item label="自我评价" name="major">
					<uni-easyinput type="textarea" v-model="formData.selfEvaluation" placeholder="请输入自我介绍" />
				</uni-forms-item>
				<uni-forms-item label="出生日期" name="entranceDate">
					<uni-datetime-picker type="date" v-model="formData.birthDate" />
				</uni-forms-item>
				<uni-section title="专注技能/方向" type="line" >

					<uni-forms-item label="技能" name="skills">
						<template #label>
							<view class="help-icon" @click="showHonorHelp()">
								<uni-icons type="help" size="32" color="#007AFF" />
							</view>
						</template>

						<view class="tags-container">

							<view v-for="(skill, index) in formData.skills" :key="index" class="tag-item">
								<uni-tag :text='skill.skillName' type="primary" :closable="true"
									@click="removeSkill(index)" />
							</view>
					
							<view class="add-button" @click="showSkills()">
								<uni-icons type="plusempty" size="24" color="#007AFF" />
							</view>
						</view>
					</uni-forms-item>

		
					<uni-popup ref="skillPopup" type="dialog">
						<uni-popup-dialog mode="input" title="添加技能/方向" placeholder="请输入技能名称" @confirm="addNewSkill" />
					</uni-popup>

					<!-- 技能帮助弹窗 -->
					<uni-popup ref="honorHelpPopup" type="dialog">
						<uni-popup-dialog title="专注技能填写说明" @confirm="closeHonorHelp">
							<view class="help-content">
								<text>1.系统将会对您擅长的技能着重分析，请有选择的填写</text>
								<text>2. 填写您专注的方向（如专注软件前端开发可以填写HTML VUE REACT等前端相关技能</text>
								<text>3. 完成后请在页面最下方点击保存</text>
							</view>
						</uni-popup-dialog>
					</uni-popup>
					<!-- <uni-forms-item label="年限" name="experience">
						<radio-group @change="onRadioChange2" :value="formData.experience">
							<label>
								<radio value="1年" :checked="formData.experience === '0'" />
								1年
							</label>
							<label>
								<radio value="2年" :checked="formData.experience === '1'" />
								2年
							</label>
							<label>
								<radio value="3年" :checked="formData.experience === '2'" />
								3年
							</label>
						</radio-group>
					</uni-forms-item> -->
				</uni-section>
				<!-- 荣誉模块 -->
				<uni-section title="所获荣誉" type="line" title-color="">

					<uni-forms-item label="荣誉" name="honors">

						<view class="tags-container">
							<!-- 荣誉标签展示 -->
							<view v-for="(honor, index) in formData.honors" :key="index" class="tag-item">
								<uni-tag :text='honor.name' type="primary" :closable="true"
									@click="removeHonor(index)" />
							</view>

							<!-- 添加按钮 -->
							<view class="add-button" @click="showHonor()">
								<uni-icons type="plusempty" size="24" color="#007AFF" />
							</view>
						</view>
					</uni-forms-item>

					<!-- 荣誉输入弹窗 -->
					<uni-popup ref="honorPopup" type="dialog">
						<uni-popup-dialog mode="input" title="添加荣誉" placeholder="请输入荣誉名称" @confirm="addNewHonor" />
					</uni-popup>


				</uni-section>


			</uni-section>

			<!-- 教育背景 -->
			<uni-section title="教育背景" type="line">

				<uni-forms-item label="入学时间" name="startDate">
					<uni-datetime-picker type="date" v-model="formData.educations[0].startDate" />
				</uni-forms-item>
				<uni-forms-item label="毕业时间" name="graduationDate">
					<uni-datetime-picker type="date" v-model="formData.educations[0].endDate" />
				</uni-forms-item>
				<!-- 	<uni-forms-item label="GPA删除" name="gpa">
					<uni-easyinput v-model="formData.gpa" placeholder="请输入平均绩点" />
				</uni-forms-item> -->
				<!-- 需要添加的信息here -->
				<uni-forms-item label="学校名称" name="school">
					<uni-easyinput v-model="formData.educations[0].school" placeholder="学校名称" />
				</uni-forms-item>
				<uni-forms-item label="学历" name="degree">
					<uni-easyinput v-model="formData.educations[0].degree" placeholder="学历" />
				</uni-forms-item>
				<uni-forms-item label="专业" name="major">
					<uni-easyinput v-model="formData.educations[0].major" placeholder="专业" />
				</uni-forms-item>
				<uni-forms-item label="备注" name="remarks">
					<uni-easyinput v-model="formData.educations[0].remarks" placeholder="备注" />
				</uni-forms-item>
			</uni-section>

			<!-- 项目经历 -->
			<uni-section title="项目经历" type="line">
				<view v-for="(project, index) in formData.projects" :key="index" class="project-item">
					<view class="project-header">
						<text class="project-title">项目{{ index + 1 }}</text>
						<uni-icons type="close" size="20" color="#ff0000" @click="removeProject(index)" />
					</view>

					<uni-forms-item label="项目名称">
						<uni-easyinput v-model="project.name" placeholder="项目名称" />
					</uni-forms-item>

					<uni-forms-item label="担任角色">
						<uni-easyinput v-model="project.role" placeholder="你在项目中的角色" />
					</uni-forms-item>
					<!-- 需要修改这里here -->
					<uni-forms-item label="突出业绩">
						<uni-easyinput v-model="project.achievements" placeholder="突出业绩" />
					</uni-forms-item>

					<uni-forms-item label="项目描述">
						<uni-easyinput type="textarea" v-model="project.description" placeholder="项目详细描述" />
					</uni-forms-item>
				</view>

				<button type="primary" @click="addProject">添加项目经历</button>
			</uni-section>
			<!-- 需要添加 here-->
			<uni-section title="工作经历" type="line">
				<view v-for="(project, index) in formData.workExperiences" :key="index" class="project-item">

					<view class="project-header">
						<text class="project-title">工作{{ index + 1 }}</text>
						<uni-icons type="close" size="20" color="#ff0000" @click="removeWorkExperience(index)" />
					</view>
					<uni-forms-item label="开始时间" name="startDate">
						<uni-datetime-picker type="date" v-model="project.startDate" />
					</uni-forms-item>
					<uni-forms-item label="结束时间" name="endDate">
						<uni-datetime-picker type="date" v-model="project.endDate" />
					</uni-forms-item>
					<uni-forms-item label="公司名称">
						<uni-easyinput v-model="project.company" placeholder="公司名称" />
					</uni-forms-item>

					<uni-forms-item label="担任职务">
						<uni-easyinput v-model="project.position" placeholder="你在项目中的角色" />
					</uni-forms-item>
					<uni-forms-item label="业绩">
						<uni-easyinput v-model="project.achievements" placeholder="业绩" />
					</uni-forms-item>
					<uni-forms-item label="备注">
						<uni-easyinput type="textarea" v-model="project.remarks" placeholder="项目详细描述" />
					</uni-forms-item>
				</view>

				<button type="primary" style="margin-bottom: 20rpx;" @click="addWorkExperience">添加工作经历</button>
			</uni-section>
			<!-- here需要添加谁 -->
			<uni-forms-item label="其他">
				<uni-easyinput type="textarea" v-model="formData.otherInfo" placeholder="其他" />
			</uni-forms-item>
<uni-popup ref="beginPopup" type="dialog">
						<uni-popup-dialog title="分析说明" @confirm="beginAnalysis">
							<view class="help-content">
								<text>1.分析前请保存修改过的简历</text>
								<text>2.请确保简历较为完善</text>
								<text>3.分析需要一点时间，请稍后再查看结果</text>
							</view>
						</uni-popup-dialog>
					</uni-popup>
			<button type="primary" @click="submit">保存简历</button>
			<button type="primary" @click="showBegin">开始分析（自动保存）</button>
		</uni-forms>
	</view>
</template>
<script>
	// #ifdef MP-WEIXIN
	export default {
		onShareAppMessage() {
			return {
				title: "高潜人才",
				path: `/pages/notes/notes`
			}
		},
		onShareTimeline() {
			return {
				title: '专业人才测评，发现你的潜力！',
				query: 'from=timeline', // 可选参数
				imageUrl: '/static/wx.png' // 朋友圈专用图片
			}
		}
	}
	// #endif
</script>
<script setup>
	import getBaseUrl from '../../utils/baseUrl'
	import {
		ref,
		reactive,
		onMounted
	} from 'vue';
	import ImagesUploaderVue from '../../compoents/ImagesUploader.vue';
	import {
		http
	} from '../../utils/requestUtil';
	const uploaderRef = ref()
	//here
	const formRef = ref();
	const formData = ref({
		avatar: '',
		// 基础信息
		name: '',
		gender: null,
		avatar: '', // 头像路径
		birthDate: '', // 出生日期

		// 求职信息
		jobTarget: '', // 求职意向

		// 联系方式
		phone: '',
		email: '',
		website: '', // 个人主页

		// 个人能力
		selfEvaluation: '', // 自我评价

		// 教育经历（数组结构）
		educations: [{
			startDate: '', // 开始时间
			endDate: '', // 结束时间
			school: '', // 学校名称
			degree: '', // 学历（本科/硕士等）
			major: '', // 学位（学士/硕士等）
			remarks: '' // 备注
		}],
experience:'',
		// 工作经历（数组结构）
		workExperiences: [{
			startDate: '',
			endDate: '',
			company: '', // 公司名称
			position: '', // 职位职务
			achievements: '', // 突出业绩
			remarks: ''
		}],

		// 项目经验（数组结构）
		projects: [{
			name: '', // 项目名称
			role: '', // 担任角色
			description: '', // 项目描述
			achievements: '' // 突出业绩
		}],

		// 获奖情况（字符串数组）
		honors: [],
		skills: [],
		// 其他信息
		other: '' // 其他补充信息
	});
	const onRadioChange = (e) => {
		// 更新性别变量的值
		formData.value.gender = e.detail.value;
	};
	const onRadioChange2 = (e) => {
		// 更新性别变量的值
		formData.value.experience = e.detail.value;
	};
	// 图片选择处理


	// 表单验证规则
	const rules = reactive({
		name: {
			rules: [{
				required: false,
				errorMessage: '姓名不能为空'
			}]
		},
		studentId: {
			rules: [{
				required: false,
				errorMessage: '学号不能为空'
			}]
		},
		phone: {
			rules: [{
					required: false,
					errorMessage: '手机号不能为空'
				},
				{
					pattern: /^1[3-9]\d{9}$/,
					errorMessage: '手机号格式不正确'
				}
			]
		}
	});

	const honorPopup = ref(null);
	const skillPopup = ref(null)
		const beginPopup = ref(null)
	const honorHelpPopup = ref(null);
	const showHonorInput = ref(null);
	const showHonor = () => {
		honorPopup.value.open()
	}
	const showBegin = () => {
		submit()
		if(uni.getStorageSync('count') == ''){
				uni.setStorageSync('count',4)
		}
		if((uni.getStorageSync('count'))<2){
			setTimeout(()=>{
				uni.setStorageSync('count',4)
			},30000)
			uni.showToast({
				title:"请不要重复请求",
				icon:'error'
			})
			return
		}
		beginPopup.value.open()
	}
	const showSkills = () => {
		skillPopup.value.open()
	}
	const showHonorHelp = () => {
		honorHelpPopup.value.open()
	}
	const closeHonorHelp = () => {
		honorHelpPopup.value.close()
	}
	// 添加新荣誉
	const addNewHonor = (value) => {
		if (value && value.trim()) {
			formData.value.honors.push({
				name: value.trim()
			});
		}
	};
	const addNewSkill = (value) => {
		if (value && value.trim()) {
			// 去除首尾空格后，将英文转换为大写
			const upperValue = value.trim().toUpperCase();
			formData.value.skills.push({
				skillName: value
			});
		}
	};

	const removeSkill = (index) => {
		console.log(index)
		formData.value.skills.splice(index, 1);
	};
	// 删除荣誉
	const removeHonor = (index) => {
		console.log(index)
		formData.value.honors.splice(index, 1);
	};

	// 添加项目经历
	const addProject = () => {
		formData.value.projects.push({
			name: '',
			role: '',
			description: ''
		});
	};

	// 删除项目经历
	const removeProject = (index) => {
		formData.value.projects.splice(index, 1);
	};
	//添加工作
	const addWorkExperience = () => {
		formData.value.workExperiences.push({
			company: '',
		});
	}
	// 删除项目经历
	const removeWorkExperience = (index) => {
		formData.value.workExperiences.splice(index, 1);
	};
	const beginAnalysis = async()=>{
		
		uni.setStorageSync('count',uni.getStorageSync('count')-1)
		const res =await http.post("/predict/predictJob")
		console.log(res)
		if(res.code ==200){
			uni.showToast({
				title:"开始分析成功，分析完成后请到分析界面查看",
			
			})
				
		}else{
			uni.showToast({
				title:"分析异常！",
				icon:'error'
			})
		
		}
	};
	// 提交表单
	const submit = async () => {
		if (!uploaderRef.value) return

		const uploadResult = await uploaderRef.value.handleUpload()

		if (uploadResult.success) {
			if (uploadResult.data != '未选择图片') {
				uni.showToast({
					title: '1',
					icon: 'none'
				})
		
				formData.value.avatar = uploadResult.data
				// 方案1：添加新元素到数组
			}

			formData.value = {
				...formData.value, // 展开原有属性
				userId: uni.getStorageSync("userId") // 添加新属性
			};
			const res = http.post('/myresume', formData.value)
			// console.log(res)
			uni.showToast({
				title: '上传简历成功'
			})
			setTimeout(() => {
				loadData()
			}, 1000)

		} else {
			uni.showToast({
				title: uploadResult.message || '上传失败',
				icon: 'none'
			})
			return
		}
		console.log(formData.value)
		
	};
	const handleSubmit = async () => {
		if (!uploaderRef.value) return

		const uploadResult = await uploaderRef.value.handleUpload()

		if (uploadResult.success) {
			console.log('上传成功', uploadResult.data)
			formData.value.avatar = uploadResult.data
			uni.showToast({
				title: '上传图片成功'
			})
		} else {
			uni.showToast({
				title: uploadResult.message || '上传失败',
				icon: 'none'
			})
		}
	}
	const loadData = async () => {
		// http
		const res = await http.get('/myresume/getResume')
		console.log(res.data)
		if (res.msg == "未有简历") {
			return
		}
		formData.value = res.data
	}
	onMounted(() => {
		uni.setStorageSync('count',4)
		loadData()
	})
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.project-item {
		margin-bottom: 20px;
		padding: 10px;
		background-color: #f5f5f5;
		border-radius: 8px;
	}

	.project-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.project-title {
		font-weight: bold;
		color: #333;
	}

	button {
		margin-top: 15px;
	}

	.tags-container {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		align-items: center;
	}

	.help-icon {

		margin-right: 50rpx;
		display: inline-block;
		margin-left: 10px;
		vertical-align: middle;
		cursor: pointer;
		padding: 5px;
		border-radius: 50%;
		width: 50rpx;
		/* background-color: #f0f0f0; */
		transition: background-color 0.3s;
	}

	.help-icon:hover {
		background-color: #e0e0e0;
	}

	.help-content {
		padding: 10px 0;
	}

	.help-content text {
		display: block;
		margin-bottom: 8px;
		color: #333;
		font-size: 14px;
	}

	.tag-item {
		display: inline-flex;
		align-items: center;
	}

	.add-button {
		padding: 6px;
		border: 1px dashed #007AFF;
		border-radius: 4px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>